<template>
	<div class="my-basics-setting p-t-10" v-if="$store.chart.getTargetData">
		<!-- 基础配置 -->
		<el-form :label-width="40" label-placement="left">
			<el-form-item label="ID">
				<el-input disabled v-model="$store.chart.getTargetData.id" />
			</el-form-item>
			<el-form-item label="名称">
				<el-input
					type="text"
					maxlength="12"
					minlength="1"
					placeholder="请输入图表名称"
					clearable
					show-word-limit
					v-model="$store.chart.getTargetData.title"
				/>
			</el-form-item>
			<el-row :gutter="10">
				<el-col :span="12">
					<el-form-item label="左边">
						<el-input-number v-model="$store.chart.getTargetData.orgConfig.attr.x" :min="0" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="上边">
						<el-input-number v-model="$store.chart.getTargetData.orgConfig.attr.y" :min="0" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="宽度">
						<el-input-number
							v-model="$store.chart.getTargetData.orgConfig.attr.w"
							:min="0"
							:disabled="$store.chart.getTargetData.isGroup"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="高度">
						<el-input-number
							v-model="$store.chart.getTargetData.orgConfig.attr.h"
							:min="0"
							:disabled="$store.chart.getTargetData.isGroup"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="层级">
						<el-input-number v-model="$store.chart.getTargetData.orgConfig.attr.zIndex" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="透明">
						<el-input-number v-model="$store.chart.getTargetData.styles.opacity" :step="0.1" :min="0" :max="1" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="位置">
				<el-space wrap :size="6">
					<el-tooltip v-for="item in positionList" :key="item.icon" placement="bottom" trigger="hover">
						<el-button :icon="item.icon" size="small" @click="item.function()" />
						<template #content> {{ item.label }}</template>
					</el-tooltip>
				</el-space>
			</el-form-item>
		</el-form>
		<ChartAnimation />
	</div>
</template>

<script setup>
import { minBy, maxBy, add } from 'lodash';
// 动画配置
const ChartAnimation = defineAsyncComponent(() => import('./ChartAnimation.vue'));

const positionList = [
	{
		label: '局左',
		icon: 'AlignHorizontalLeft',
		function() {
			if ($store.chart.targetChart.selectId.length > 1) {
				const list = selectDAata();
				const min = minBy(list, 'x').x;
				list.forEach((item) => {
					item.x = min;
				});
			} else {
				$store.chart.getTargetData.orgConfig.attr.x = 0;
			}
		}
	},
	{
		label: 'X轴居中',
		icon: 'AlignVerticalCenter',
		function() {
			if ($store.chart.targetChart.selectId.length > 1) {
				const list = selectDAata();
				const max = maxBy(list, (o) => add(o.x + o.w));
				list.forEach((item) => {
					item.x = add(max.x + max.w / 2) - item.w / 2;
				});
			} else {
				$store.chart.getTargetData.orgConfig.attr.y =
					($store.chart.editCanvasConfig.height - $store.chart.getTargetData.orgConfig.attr.h) / 2;
			}
		}
	},
	{
		label: '居右',
		icon: 'AlignHorizontalRight',
		function() {
			if ($store.chart.targetChart.selectId.length > 1) {
				const list = selectDAata();
				const max = maxBy(list, (o) => add(o.x + o.w));
				list.forEach((item) => {
					item.x = add(max.x + max.w) - item.w;
				});
			} else {
				$store.chart.getTargetData.orgConfig.attr.x =
					$store.chart.editCanvasConfig.width - $store.chart.getTargetData.orgConfig.attr.w;
			}
		}
	},
	{
		label: '顶部',
		icon: 'AlignVerticalTop',
		function() {
			if ($store.chart.targetChart.selectId.length > 1) {
				const list = selectDAata();
				const min = minBy(list, 'y').y;
				list.forEach((item) => {
					item.y = min;
				});
			} else {
				$store.chart.getTargetData.orgConfig.attr.y = 0;
			}
		}
	},
	{
		label: 'Y轴居中',
		icon: 'AlignHorizontalCenter',
		function() {
			if ($store.chart.targetChart.selectId.length > 1) {
				const list = selectDAata();
				const max = maxBy(list, (o) => add(o.y + o.h));
				list.forEach((item) => {
					item.y = add(max.y + max.h / 2) - item.h / 2;
				});
			} else {
				$store.chart.getTargetData.orgConfig.attr.x =
					($store.chart.editCanvasConfig.width - $store.chart.getTargetData.orgConfig.attr.w) / 2;
			}
		}
	},
	{
		label: '底部',
		icon: 'AlignVerticalBottom',
		function() {
			if ($store.chart.targetChart.selectId.length > 1) {
				const list = selectDAata();
				const max = maxBy(list, (o) => add(o.y + o.h));
				list.forEach((item) => {
					item.y = add(max.y + max.h) - item.h;
				});
			} else {
				$store.chart.getTargetData.orgConfig.attr.y =
					$store.chart.editCanvasConfig.height - $store.chart.getTargetData.orgConfig.attr.h;
			}
		}
	}
];

function selectDAata() {
	const data = [];
	$store.chart.targetChart.selectId.forEach((id) => {
		data.push($store.chart.componentList[$store.chart.fetchTargetIndex(id)].orgConfig.attr);
	});
	return data;
}
</script>
